import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
);
camera.position.set(100, 100, 200);
camera.lookAt(0, 0, 0);
const axesHelper = new THREE.AxesHelper(200);
scene.add(axesHelper);

const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);

// LatheGeometry 管道
const pointsArr = [
	new THREE.Vector2(0, 0),
	new THREE.Vector2(50, 50),
	new THREE.Vector2(20, 80),
	new THREE.Vector2(0, 150),
];
const geometry = new THREE.LatheGeometry(pointsArr,5);
const material = new THREE.MeshBasicMaterial({
	color: new THREE.Color("pink"),
	side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);
const geometry2 = new THREE.BufferGeometry();
geometry2.setFromPoints(pointsArr);
const material2 = new THREE.PointsMaterial({
	color: new THREE.Color("blue"),
	size: 5,
});
const points = new THREE.Points(geometry2, material2);
const line = new THREE.Line(geometry2, new THREE.LineBasicMaterial());
mesh.add(points, line);

// TubeGeometry
const p1 = new THREE.Vector3(-100, 0, 0);
const p2 = new THREE.Vector3(50, 100, 0);
const p3 = new THREE.Vector3(100, 0, 100);
const p4 = new THREE.Vector3(100, 0, 0);
const curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4);
const tubeGeometry = new THREE.TubeGeometry(curve, 50, 20, 20);
const tubeMaterial = new THREE.MeshLambertMaterial({
	color: new THREE.Color("green"),
	side: THREE.DoubleSide,
    wireframe: true,
})
const tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial);
// scene.add(tubeMesh);
const curvePoints = new THREE.BufferGeometry().setFromPoints([p1, p2, p3, p4]);
const curveLine = new THREE.Line(curvePoints, new THREE.LineBasicMaterial());
tubeMesh.add(curvePoints,curveLine);

const gui = new GUI();
const obj = {
    tubularSegments: 50,
    radius: 20,
    radialSegments: 20
}
function onChange() {
    tubeMesh.geometry = new THREE.TubeGeometry(
        curve,
        obj.tubularSegments,
        obj.radius,
        obj.radialSegments
    );
}
gui.add(obj, 'tubularSegments').onChange(onChange)
    .min(3).max(100).step(1).name('管道方向分段数');
gui.add(obj, 'radius').onChange(onChange)
    .min(10).max(100).step(0.1).name('半径');
gui.add(obj, 'radialSegments').onChange(onChange)
    .min(3).max(100).step(1).name('横截面分段数');


//Shape + ShapeGeometry 自定义多边形
const pointsArr1 = [
    new THREE.Vector2(100, 0),
    new THREE.Vector2(50, 20),
    new THREE.Vector2(0, 0),
    new THREE.Vector2(0, 50),
    new THREE.Vector2(50, 100)
];
// 创建shape方式1
// const shape = new THREE.Shape(pointsArr1);
// 创建shape方式2
const shape = new THREE.Shape();
shape.moveTo(100, 0);
shape.lineTo(0, 0);
shape.lineTo(0, 50);
shape.lineTo(80, 100);

//挖孔、裁剪shape
const path = new THREE.Path();
path.arc(50, 50, 10);
shape.holes.push(path);

const shapeGeometry = new THREE.ShapeGeometry(shape);
//拉伸shape
const extrudeGeometry = new THREE.ExtrudeGeometry(shape, {
    depth: 10
});
const shapeMaterial = new THREE.MeshBasicMaterial({
    color: new THREE.Color("lightblue"),
    side: THREE.DoubleSide,
    // wireframe: true,
})
// const shapeMesh = new THREE.Mesh(shapeGeometry, shapeMaterial);
const shapeMesh = new THREE.Mesh(extrudeGeometry, shapeMaterial);
scene.add(shapeMesh);







function animate() {
	renderer.render(scene, camera);
	requestAnimationFrame(animate);
}
animate();



